<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>健康饮食 - 首页</title>
    <link href="https://cdn.jsdelivr.net/npm/tailwindcss@2.2.19/dist/tailwind.min.css" rel="stylesheet">
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
    <style>
        .progress-ring-circle {
            transition: stroke-dashoffset 0.35s;
            transform: rotate(-90deg);
            transform-origin: 50% 50%;
        }
        /* 防止内容溢出 */
        body {
            overflow-x: hidden;
            max-width: 100vw;
        }
        /* 确保容器不溢出 */
        .container {
            width: 100%;
            max-width: 100%;
            overflow-x: hidden;
        }
        /* 优化横向滚动区域 */
        .overflow-x-auto {
            scrollbar-width: thin;
            -ms-overflow-style: none;
        }
        .overflow-x-auto::-webkit-scrollbar {
            height: 4px;
        }
        .overflow-x-auto::-webkit-scrollbar-thumb {
            background-color: rgba(156, 163, 175, 0.5);
            border-radius: 2px;
        }
    </style>
</head>
<body class="bg-gray-100 text-gray-800">
    <!-- 顶部导航栏 -->
    <header class="bg-white shadow-sm">
        <div class="container mx-auto px-4 py-3 flex justify-between items-center">
            <h1 class="text-xl font-bold text-green-600">健康饮食</h1>
            <div>
                <button class="p-2">
                    <i class="fas fa-bell text-gray-600"></i>
                </button>
            </div>
        </div>
    </header>

    <!-- 主要内容区 -->
    <main class="container mx-auto px-4 py-6">
        <!-- 日期选择器 -->
        <div class="flex justify-between items-center mb-6">
            <div class="text-lg font-semibold">今日摄入</div>
            <div class="flex items-center bg-white rounded-full px-3 py-1 shadow-sm">
                <i class="fas fa-calendar-alt text-green-600 mr-2"></i>
                <span>2023年5月15日</span>
                <i class="fas fa-chevron-down text-gray-500 ml-2"></i>
            </div>
        </div>

        <!-- 热量摄入进度环 -->
        <div class="bg-white rounded-lg shadow-sm p-6 mb-6">
            <div class="flex flex-col items-center">
                <div class="relative w-48 h-48 mb-4">
                    <svg class="w-full h-full" viewBox="0 0 100 100">
                        <circle cx="50" cy="50" r="45" fill="none" stroke="#e6e6e6" stroke-width="8"/>
                        <circle class="progress-ring-circle" cx="50" cy="50" r="45" fill="none" stroke="#4CAF50" stroke-width="8" stroke-dasharray="283" stroke-dashoffset="100"/>
                    </svg>
                    <div class="absolute inset-0 flex flex-col items-center justify-center">
                        <span class="text-3xl font-bold">1256</span>
                        <span class="text-sm text-gray-500">/ 2000 千卡</span>
                    </div>
                </div>
                <div class="grid grid-cols-3 gap-8 w-full">
                    <div class="flex flex-col items-center">
                        <span class="text-sm text-gray-500">蛋白质</span>
                        <div class="w-full bg-gray-200 rounded-full h-2 mt-1">
                            <div class="bg-blue-500 h-2 rounded-full" style="width: 65%"></div>
                        </div>
                        <span class="text-xs mt-1">45g / 70g</span>
                    </div>
                    <div class="flex flex-col items-center">
                        <span class="text-sm text-gray-500">碳水</span>
                        <div class="w-full bg-gray-200 rounded-full h-2 mt-1">
                            <div class="bg-yellow-500 h-2 rounded-full" style="width: 85%"></div>
                        </div>
                        <span class="text-xs mt-1">170g / 200g</span>
                    </div>
                    <div class="flex flex-col items-center">
                        <span class="text-sm text-gray-500">脂肪</span>
                        <div class="w-full bg-gray-200 rounded-full h-2 mt-1">
                            <div class="bg-red-500 h-2 rounded-full" style="width: 50%"></div>
                        </div>
                        <span class="text-xs mt-1">30g / 60g</span>
                    </div>
                </div>
            </div>
        </div>

        <!-- 餐次记录卡片 -->
        <div class="mb-6">
            <h2 class="text-lg font-semibold mb-3">今日记录</h2>
            
            <!-- 早餐 -->
            <div class="bg-white rounded-lg shadow-sm p-4 mb-3">
                <div class="flex justify-between items-center mb-3">
                    <div class="flex items-center">
                        <div class="bg-yellow-100 p-2 rounded-lg mr-3">
                            <i class="fas fa-coffee text-yellow-600"></i>
                        </div>
                        <span class="font-medium">早餐</span>
                    </div>
                    <span class="text-sm text-gray-500">08:30</span>
                </div>
                <div class="flex items-center">
                    <div class="flex-1">
                        <p class="text-sm text-gray-600">全麦面包，鸡蛋，牛奶</p>
                        <p class="text-xs text-gray-500 mt-1">450 千卡</p>
                    </div>
                    <button class="text-green-600">
                        <i class="fas fa-chevron-right"></i>
                    </button>
                </div>
            </div>
            
            <!-- 午餐 -->
            <div class="bg-white rounded-lg shadow-sm p-4 mb-3">
                <div class="flex justify-between items-center mb-3">
                    <div class="flex items-center">
                        <div class="bg-orange-100 p-2 rounded-lg mr-3">
                            <i class="fas fa-utensils text-orange-600"></i>
                        </div>
                        <span class="font-medium">午餐</span>
                    </div>
                    <span class="text-sm text-gray-500">12:15</span>
                </div>
                <div class="flex items-center">
                    <div class="flex-1">
                        <p class="text-sm text-gray-600">米饭，清蒸鱼，西兰花，番茄豆腐汤</p>
                        <p class="text-xs text-gray-500 mt-1">560 千卡</p>
                    </div>
                    <button class="text-green-600">
                        <i class="fas fa-chevron-right"></i>
                    </button>
                </div>
            </div>
            
            <!-- 晚餐 -->
            <div class="bg-white rounded-lg shadow-sm p-4 mb-3">
                <div class="flex justify-between items-center mb-3">
                    <div class="flex items-center">
                        <div class="bg-blue-100 p-2 rounded-lg mr-3">
                            <i class="fas fa-moon text-blue-600"></i>
                        </div>
                        <span class="font-medium">晚餐</span>
                    </div>
                    <span class="text-sm text-gray-500">18:45</span>
                </div>
                <div class="flex items-center">
                    <div class="flex-1">
                        <p class="text-sm text-gray-600">糙米饭，清炒菠菜，鸡胸肉</p>
                        <p class="text-xs text-gray-500 mt-1">480 千卡</p>
                    </div>
                    <button class="text-green-600">
                        <i class="fas fa-chevron-right"></i>
                    </button>
                </div>
            </div>
            
            <!-- 添加记录按钮 -->
            <button class="w-full bg-green-600 text-white rounded-lg py-3 flex items-center justify-center">
                <i class="fas fa-plus mr-2"></i>
                <span>添加饮食记录</span>
            </button>
        </div>

        <!-- 食谱推荐 -->
        <div class="bg-white rounded-lg shadow-sm p-4 mb-4">
            <div class="flex justify-between items-center mb-3">
                <h2 class="font-medium">食谱推荐</h2>
                <a href="recipe-list.html" class="text-green-600 text-sm">查看更多</a>
            </div>
            <div class="overflow-x-auto pb-2">
                <div class="flex space-x-4">
                    <!-- 推荐食谱卡片1 -->
                    <div class="bg-white rounded-lg shadow-sm w-64 flex-shrink-0">
                        <img src="https://images.unsplash.com/photo-1546069901-ba9599a7e63c" alt="健康沙拉" class="w-full h-36 object-cover rounded-t-lg">
                        <div class="p-3">
                            <h3 class="font-medium mb-1">藜麦蔬菜沙拉</h3>
                            <div class="flex items-center text-xs text-gray-500 mb-2">
                                <i class="fas fa-fire-alt mr-1"></i>
                                <span>320千卡</span>
                                <span class="mx-2">|</span>
                                <i class="fas fa-clock mr-1"></i>
                                <span>15分钟</span>
                            </div>
                            <div class="flex">
                                <span class="bg-green-100 text-green-800 text-xs px-2 py-1 rounded mr-1">高蛋白</span>
                                <span class="bg-blue-100 text-blue-800 text-xs px-2 py-1 rounded">低脂</span>
                            </div>
                        </div>
                    </div>
                    
                    <!-- 推荐食谱卡片2 -->
                    <div class="bg-white rounded-lg shadow-sm w-64 flex-shrink-0">
                        <img src="https://images.unsplash.com/photo-1482049016688-2d3e1b311543" alt="三文鱼" class="w-full h-36 object-cover rounded-t-lg">
                        <div class="p-3">
                            <h3 class="font-medium mb-1">香煎三文鱼</h3>
                            <div class="flex items-center text-xs text-gray-500 mb-2">
                                <i class="fas fa-fire-alt mr-1"></i>
                                <span>420千卡</span>
                                <span class="mx-2">|</span>
                                <i class="fas fa-clock mr-1"></i>
                                <span>25分钟</span>
                            </div>
                            <div class="flex">
                                <span class="bg-green-100 text-green-800 text-xs px-2 py-1 rounded mr-1">高蛋白</span>
                                <span class="bg-purple-100 text-purple-800 text-xs px-2 py-1 rounded">欧米伽3</span>
                            </div>
                        </div>
                    </div>
                    
                    <!-- 推荐食谱卡片3 -->
                    <div class="bg-white rounded-lg shadow-sm w-64 flex-shrink-0">
                        <img src="https://images.unsplash.com/photo-1490645935967-10de6ba17061" alt="早餐碗" class="w-full h-36 object-cover rounded-t-lg">
                        <div class="p-3">
                            <h3 class="font-medium mb-1">健康早餐碗</h3>
                            <div class="flex items-center text-xs text-gray-500 mb-2">
                                <i class="fas fa-fire-alt mr-1"></i>
                                <span>280千卡</span>
                                <span class="mx-2">|</span>
                                <i class="fas fa-clock mr-1"></i>
                                <span>10分钟</span>
                            </div>
                            <div class="flex">
                                <span class="bg-yellow-100 text-yellow-800 text-xs px-2 py-1 rounded mr-1">高纤维</span>
                                <span class="bg-red-100 text-red-800 text-xs px-2 py-1 rounded">抗氧化</span>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>

        <!-- 每日健康提示 -->
        <div class="bg-white rounded-lg shadow-sm p-5">
            <div class="flex items-start">
                <div class="bg-green-100 p-3 rounded-lg mr-4">
                    <i class="fas fa-lightbulb text-green-600 text-xl"></i>
                </div>
                <div>
                    <h3 class="font-medium mb-1">今日健康提示</h3>
                    <p class="text-sm text-gray-600">多喝水有助于代谢和消化。建议每天至少饮用2000ml水，保持身体水分平衡，促进毒素排出。</p>
                </div>
            </div>
        </div>
    </main>

    <!-- 底部导航栏 -->
    <footer class="fixed bottom-0 left-0 right-0 bg-white border-t border-gray-200">
        <div class="flex justify-around items-center py-2">
            <a href="#" class="flex flex-col items-center p-2 text-green-600">
                <i class="fas fa-home text-xl"></i>
                <span class="text-xs mt-1">首页</span>
            </a>
            <a href="#" class="flex flex-col items-center p-2 text-gray-500">
                <i class="fas fa-search text-xl"></i>
                <span class="text-xs mt-1">搜索</span>
            </a>
            <a href="#" class="flex flex-col items-center p-2 text-gray-500">
                <i class="fas fa-chart-pie text-xl"></i>
                <span class="text-xs mt-1">分析</span>
            </a>
            <a href="user.html" class="flex flex-col items-center p-2 text-gray-500">
                <i class="fas fa-user text-xl"></i>
                <span class="text-xs mt-1">我的</span>
            </a>
        </div>
    </footer>

    <script>
        // 设置进度环的进度
        const circle = document.querySelector('.progress-ring-circle');
        const radius = circle.r.baseVal.value;
        const circumference = radius * 2 * Math.PI;
        
        circle.style.strokeDasharray = `${circumference} ${circumference}`;
        
        // 设置当前进度 (63%)
        const progress = 63;
        const offset = circumference - (progress / 100) * circumference;
        circle.style.strokeDashoffset = offset;
    </script>
</body>
</html> 